import React from 'react'
import { connect } from 'dva'
import moment from 'moment'
import Header from './Header'
import ChartTimeBar from '@/components/ChartTimeBar'
import List from '@/components/List'
import XModel from './XModel'

@connect(({ projectHall, loading }) => ({
  projectHall,
  loading: loading.effects['projectHall/fetchProject'],
}))
class ProjectHall extends React.PureComponent {

  state = {
    // eslint-disable-next-line
    pageNumber: 0
  }

  // 加载更多
  onLoadReduxMore = () => {
    const { dispatch } = this.props
    this.setState(state => {
      const pageNumber = state.pageNumber + 1
      dispatch({
        type: 'projectHall/fetchProject',
        payload: { page: pageNumber }
      })
      return {
        ...state,
        pageNumber
      }
    })
  }

  // 获取详情页数据
  fetchProfile = payload => {
    const { dispatch } = this.props
    dispatch({
      type: 'projectHall/fetchProfile',
      payload: { visible: true, ...payload }
    })
  }

  render() {
    const { projectHall } = this.props
    const { initLoading, loading, isDisable, list } = projectHall

    const listData = {
      initLoading,
      loading,
      isDisable,
      list,
      onLoadReduxMore: this.onLoadReduxMore,
      renderItem: item => {
        // eslint-disable-next-line
        const { task = [] } = item
        const values = ['计划交付时间', '计划提前交付时间', '计划延迟交付时间', '已终止']
        // eslint-disable-next-line
        const data = []
        // eslint-disable-next-line
        task.forEach(({ staff_name, task_start, task_end, task_finish, task_status }) => {
          // eslint-disable-next-line
          const name = String(staff_name)
          const start = Number(task_start)
          const end = Number(task_end)
          const finish = Number(task_finish)
          const status = Number(task_status) - 1
          const formatStart = moment(start * 1000).format('YYYY-MM-DD HH:mm:ss')
          const formatEnd = moment(end * 1000).format('YYYY-MM-DD HH:mm:ss')
          const formatFinish = moment(finish * 1000).format('YYYY-MM-DD HH:mm:ss')
          // 进行中
          if (status === 0) {
            const range = [formatStart, formatEnd]
            const sta = values[status]
            data.push({ name, range, status: sta })
          }
          // 已完成
          if (status === 1) {
            let range = []
            let sta = ''
            if (end > finish && finish > start) {
              range = [formatStart, formatFinish]
              sta = values[status]
              data.push({ name, range: [formatFinish, formatEnd], status: values[0] })
            }
            if (finish > end) {
              range = [formatEnd, formatFinish]
              sta = values[status + 1]
              data.push({ name, range: [formatStart, formatEnd], status: values[1] })
            }
            data.push({ name, range, status: sta })
          }
          // 已终止
          if (status === 2) {
            const range = [formatStart, formatEnd]
            const sta = values[status + 1]
            data.push({ name, range, status: sta })
          }
        })
        
        const starttime = Number(item.project_start) * 1000
        const endtime = Number(item.project_end) * 1000
        const finishtime = Number(item.project_finish) * 1000
        let day = 0
        if (finishtime) {
          const nTime = new Date(finishtime).getTime() - new Date(endtime).getTime();
          day = Math.floor(nTime / 86400000)
        }

        const headerData = {
          project_id: Number(item.project_id),
          project_status: Number(item.project_status),
          project_name: item.project_name,
          owner_name: item.owner_name,
          starttime,
          endtime,
          finishtime,
          day,
          fetchProfile: this.fetchProfile
        }

        // 黄色、蓝色、绿色分别代表策划、美术、技术岗位计划中和新增的任务，红色是延期、灰色是终止、
        // eslint-disable-next-line

        return (
          <React.Fragment>
            <Header {...headerData} />
            {/*
            * 进行中
            * 计划完成
            * 实际完成
            * 已终止
            */}
            <ChartTimeBar data={data} GeomColor={['#74d0d0', '#52c41a', '#fadb14', '#bfbfbf']} />
          </React.Fragment>
        )
      },
    }

    return (
      <React.Fragment>
        <XModel />
        <List {...listData} />
      </React.Fragment>
    )
  }
}

export default ProjectHall